<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>留言墙</title>
	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
	<!-- Bootstrap 3.3.4 -->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<!-- Font Awesome Icons -->
	<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" >

	<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
	<!-- Socket.Io.js -->
	<script src="/socket.io/socket.io.js"></script>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body class="skin-blue sidebar-mini">
    <div class="container">
		<div class="row">
			<div class="col-md-12">
			<div class="box box-warning direct-chat direct-chat-warning">
				<div class="box-header with-border">
					<h3 class="box-title">祝福墙</h3>
					<div class="box-tools pull-right">
						<span class="label label-warning">1168998 Total Messages</span>
					</div>
				</div><!-- /.box-header -->
				<div class="box-body chat">
					<%for (var i = 0; i < msgData.length; i++) { %>
					<div class="item">
						<img src="<%= msgData[i][url].replace(/0$/g, '64') %>">
						<p class="message">
							<a class="name" href="#"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> <%= moment(msgData[i].created_at*1000).fromNow(); %></small><%= msgData[i].fans.nickname %></a>
						</p>
						<div class="direct-chat-text">
							<%= msgData[i].message %>
						</div>
					</div>
					<% } %>

				</div><!-- /.box-body -->

				<div class="box-footer">
					<form action="#" method="post">
						<div class="input-group">
							<input type="text" name="message" placeholder="留下祝福吧，亲..." class="form-control"/>
							<span class="input-group-btn">
								<button type="submit" class="btn btn-warning btn-flat">发送</button>
							</span>
						</div>
					</form>
				</div><!-- /.box-footer-->
			</div><!-- /.col -->
		</div><!-- /.row -->

		</div><!-- /.container -->
    </div><!-- ./wrapper -->
    <!-- jQuery 2.1.4 -->
    <script type='text/javascript' src='jQuery/jQuery-2.1.4.min.js' /></script>
    <!-- Bootstrap 3.3.2 JS -->
	<script type='text/javascript' src='bootstrap/js/bootstrap.min.js' /></script>

	<script>
	var socket = io();

	$('form').submit(function(){
		socket.emit('sendMessage', $('input[name=message]').val());
		$('input[name=message]').val('');
		return false;
	});

	socket.on('sendMessage', function(msg){

		var avatarImg = document.createElement('img');
		$(avatarImg).attr('src','/img/user4-128x128.jpg');

		var msgSender = document.createElement('p');
		$(msgSender).attr('class','message');
		$(msgSender).html('<a class="name" href="#"><small class="text-muted pull-right"><i class="fa fa-clock-o"></i> 06-30 2:15</small>黎明</a>')
		var msgBox = document.createElement('div');
		$(msgBox).attr('class','direct-chat-text');
		$(msgBox).text(msg);

		var msgItem = document.createElement('div');
		$(msgItem).attr('class','item');

		$(msgItem).append(avatarImg);
		$(msgItem).append(msgSender);
		$(msgItem).append(msgBox);

		$('.box-body').append(msgItem);
	});
	</script>

	</body>
</html>
